<template>
  <div class="stats-panel">
    <div class="stats-header" @click="toggleCollapse">
      <span>近4小时统计</span>
      <px-icon :class="['stats-toggle']">
        <ArrowDown v-if="isCollapsed" />
        <ArrowUp v-else />
      </px-icon>
    </div>
    <px-scrollbar>
      <div class="stats-content" :class="{ collapsed: isCollapsed }">
        <px-table :data="statsData" size="small" style="width: 100%" height="400" :row-class-name="tableRowClassName">
          <px-table-column fixed prop="name" label="区域" width="120" />
          <px-table-column prop="avg" :label="`均值(${currentView === 'temperature' ? '°C' : '%'})`" width="100" />
          <px-table-column prop="max" :label="`最大(${currentView === 'temperature' ? '°C' : '%'})`" width="100" />
          <px-table-column prop="min" :label="`最小(${currentView === 'temperature' ? '°C' : '%'})`" width="100" />
          <px-table-column label="状态" width="80">
            <template #default="{ row }">
              <px-tag :type="getStatusTagType(row.status)" size="small" effect="light" class="status-tag">
                <span class="tag-content">
                  <px-icon :class="['status-icon', `status-${row.status}`]">
                    <CircleCheck v-if="row.status === 'normal'" />
                    <!-- <Warning v-else-if="row.status === 'warning'" /> -->
                    <CircleClose v-else />
                  </px-icon>
                  <span class="tag-text">{{ getStatusText(row.status) }}</span>
                </span>
              </px-tag>
            </template>
          </px-table-column>
        </px-table>
      </div>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
// import { ArrowDown, ArrowUp, CircleCheck, Warning, CircleClose } from "@element-plus/icons-vue";

const props = defineProps({
  areas: {
    type: Array,
    required: true
  },
  currentView: {
    type: String,
    default: "temperature"
  },
  lastUpdateTime: {
    type: String,
    default: ""
  }
});

const isCollapsed = ref(false);

// 计算统计数据
const statsData = computed(() => {
  return props.areas.map((area: any) => {
    const stats = calculateAreaStats(area);
    return {
      name: area.name,
      avg: stats.avg,
      max: stats.max,
      min: stats.min,
      status: stats.status
    };
  });
});

// 计算区域统计数据
const calculateAreaStats = (area: any) => {
  // 模拟数据 - 实际应用中应从API获取
  // const values = [];
  // for (let i = 0; i < 60; i++) {
  //   const value =
  //     props.currentView === "temperature" ? area.valueNewTemp + (Math.random() - 0.5) * 0.4 : area.valueNewHumidity + (Math.random() - 0.5) * 2;
  //   values.push(value);
  // }

  // const avg = values.reduce((a, b) => a + b) / values.length;
  // const max = Math.max(...values);
  // const min = Math.min(...values);

  // // 判断状态
  // let status = "normal";
  // if (props.currentView === "temperature") {
  //   if (max > 23.5 || min < 21.5) status = "alarm";
  //   else if (max > 23.0 || min < 22.0) status = "warning";
  // } else {
  //   if (max > 55 || min < 45) status = "alarm";
  //   else if (max > 52 || min < 48) status = "warning";
  // }

  const avg = props.currentView === "temperature" ? area.valueAvgTemp : area.valueAvgHumidity;
  const max = props.currentView === "temperature" ? area.valueMaxTemp : area.valueMaxHumidity;
  const min = props.currentView === "temperature" ? area.valueMinTemp : area.valueMinHumidity;

  // 判断状态
  let status = "normal";
  if (props.currentView === "temperature") {
    if (area.oocTemp) status = "alarm";
  } else {
    if (area.oocHumidity) status = "alarm";
  }

  return { avg, max, min, status };
};

// 表格行样式
const tableRowClassName = ({ row }: { row: any }) => {
  return `row-status-${row.status}`;
};

// 状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case "normal":
      return "success";
    case "warning":
      return "warning";
    case "alarm":
      return "danger";
    default:
      return "info";
  }
};

// 状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case "normal":
      return "正常";
    case "warning":
      return "警告";
    case "alarm":
      return "报警";
    default:
      return "未知";
  }
};

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};
</script>

<style scoped lang="scss">
.stats-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 500px;
  overflow: hidden;
  background: rgb(255 255 255 / 95%);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, #346187, #4a7ca3);
}

.stats-toggle {
  cursor: pointer;
  transition: transform 0.3s;

  &.collapsed {
    transform: rotate(180deg);
  }
}

.stats-content {
  max-height: 400px;
  overflow-y: auto;
  transition: max-height 0.3s ease;

  &.collapsed {
    max-height: 0;
    overflow: hidden;
  }
}

.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  .tag-content {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }

  .status-icon {
    margin-right: 4px;
    font-size: 14px;

    &.status-normal {
      color: #67c23a;
    }

    &.status-warning {
      color: #e6a23c;
    }

    &.status-alarm {
      color: #f56c6c;
    }
  }

  .tag-text {
    padding-top: 1px;
    line-height: 1;
  }
}

:deep(.px-table) {
  .row-status-normal {
    --px-table-tr-bg-color: rgb(103 194 58 / 5%);
  }

  .row-status-warning {
    --px-table-tr-bg-color: rgb(230 162 60 / 5%);
  }

  .row-status-alarm {
    --px-table-tr-bg-color: rgb(245 108 108 / 5%);
  }
}
</style>
